<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="38%"
    
    align-center
    color="white"
    style="background-color: #000000a2;"
  >
    <h1 style="color: white; font-size: 53px">{{ bookitem.bookName }}
    </h1>
    <el-container>
      <el-aside width="215px">
        <div>
          <img :src="bookitem.bookCover" alt=""  />
        </div>
      </el-aside>
      <el-main style="margin-top: 13%;">
        <div>
          <p style="color:white;font-size:30px">
            {{ bookitem.info }}
          </p>
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</template>
<script>
export default {
  name: "Bookdetail",
  data() {
    return {
      centerDialogVisible: false,
      bookitem: {},
    };
  },
  methods() {},
};
</script>